<template>
	<a-card title="菜单路由" :bordered="false">
		<template slot="extra">
			<a-form layout="inline">
				<a-form-item><a-button icon="plus" type="danger" @click="openEdit()">新建</a-button></a-form-item>
			</a-form>
		</template>
		<a-table :loading="loading" :pagination="pagination" :columns="columns" :data-source="dataSource" :rowKey="record => record.id">
			<!-- 名称slot -->
			<template slot="name" slot-scope="text, record">
				<a-icon  :type="record.icon" :style="{ fontSize: '16px' }"  v-if="record.icon"/>
				<span    v-else>|--</span>

				&ensp;	{{ text }}
			</template>


			<template slot="display" slot-scope="text, record">


				<span :class=" text==='F'?'text-danger':'' ">
						{{ $exMod.findDict(RouterDisplayOPT,text) }}

				</span>

			</template>


			<!-- 系统 slot -->
			<template slot="system" slot-scope="text">
				{{ $exMod.findDict(RouterSystemOPT, text) }}
			</template>
			<!-- 类别slot -->
			<template slot="type" slot-scope="text">
				<a-tag color="cyan" v-if="text === 'page'">{{ $exMod.findDict(RouterTypOPT, text) }}</a-tag>
				<a-tag color="red" v-else>{{ $exMod.findDict(RouterTypOPT, text) }}</a-tag>
			</template>


			<template slot="path" slot-scope="text, record">
				<a-tag color="blue" v-if="record.type === 'api'">{{ record.request }}</a-tag>
				{{ text }}
			</template>

			<!-- 操作 slot -->
			<template slot="operation" slot-scope="text, record">
				<span v-if="record.type === 'page'">
					<a @click="addChildMenu(record)">子菜单</a>
					<a-divider type="vertical" />
				</span>

				<a @click="openEdit(record)">编辑</a>
				<a-divider type="vertical" />
				<a-popconfirm title="确定要删除路由吗?" @confirm="() => delRouter(record)">
					<span><a href="javascript:void(0)">删除</a></span>
				</a-popconfirm>
			</template>
		</a-table>
		<EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord" />
	</a-card>
</template>
<script>
import { dictLoad } from '../../../util/internal.api';
import { menuTable } from '../public/columns';
import { getMenuTree, menuDel } from '../public/http';

export default {
	components: {EditBox:()=>import('./edit.vue') },
	data() {
		return {
			RouterSystemOPT: [],
			RouterTypOPT: [],
			RouterDisplayOPT:[],
			loading: false,
			editShow: false,
			editRecord: {},
			dataSource: [],
			columns: menuTable,
			pagination: false
		};
	},
	methods: {
		
		
		//接受编辑器Modal关闭事件
		closeEdit(e) {
			this.editShow = false;
			if (e.render) {
				this.getTableList();
			}
		},
		//获取表格数据
		getTableList() {
			this.loading = true;
			getMenuTree().then(res => {
				if (res.code === 0) {
					this.loading = false;
					this.dataSource = res.data.result;
				}
			});
		},
		//删除路由
		delRouter(record) {
			this.loading = true;
			menuDel(record.id).then(res => this.xhrMsg(res));
		},
		//新增和删除返回相同的消息构造
		xhrMsg(res) {
			if (res.code === 0) {
				//成功提醒
				this.$notification.success({ message: '操作成功', description: res.message });
				this.getTableList(); //重载路由
			} else {
				//错误提醒
				this.$notification.error({ message: '操作失败', description: res.message });
			}
			this.loading = false;
		},
		//打开编辑器
		openEdit(obj = {}) {
			if (!obj.id) {
				obj.pid = '0';
			}
			this.editRecord = obj;
			this.editShow = true;
		},

		//新建子菜单
		addChildMenu(record) {
			let obj = { pid: record.id, system: record.system };
			this.editRecord = obj;
			this.editShow = true;
		},
		//数据初始化
		async init() {
			await dictLoad('RouterSystem').then(res => (this.RouterSystemOPT = res));
			await dictLoad('RouterType').then(res => (this.RouterTypOPT = res));
			await dictLoad('RouterDisplay').then(res => this.RouterDisplayOPT = res)
			this.getTableList();
		}
	},
	created() {
		this.init();
	}
};
</script>
